<template>
    <div class="box-chart">
        <div id="chartMap"></div>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from 'echarts';
import axios from "axios";

const data = [
    {
        name: '北京',
        value: Math.round(Math.random() * 100),
        warn: 10,
        problem: 12,
    },
    {
        name: '天津',
        value: Math.round(Math.random() * 100),
        warn: 10,
        problem: 12,
    },
    {
        name: '上海',
        value: Math.round(Math.random() * 100),
        warn: 10,
        problem: 12,
    },
    {
        name: '重庆',
        value: Math.round(Math.random() * 100),
        warn: 10,
        problem: 12,
    },
    { name: '河北', value: Math.round(Math.random() * 100) },
    { name: '河南', value: Math.round(Math.random() * 100) },
    { name: '云南', value: Math.round(Math.random() * 100) },
    { name: '辽宁', value: Math.round(Math.random() * 100) },
    { name: '黑龙江', value: Math.round(Math.random() * 100) },
    { name: '湖南', value: Math.round(Math.random() * 100) },
    { name: '安徽', value: Math.round(Math.random() * 100) },
    { name: '山东', value: Math.round(Math.random() * 100) },
    { name: '新疆', value: Math.round(Math.random() * 100) },
    { name: '江苏', value: Math.round(Math.random() * 100) },
    { name: '浙江', value: Math.round(Math.random() * 100) },
    { name: '江西', value: Math.round(Math.random() * 100) },
    { name: '湖北', value: Math.round(Math.random() * 100) },
    { name: '广西', value: Math.round(Math.random() * 100) },
    { name: '甘肃', value: Math.round(Math.random() * 100) },
    { name: '山西', value: Math.round(Math.random() * 100) },
    { name: '内蒙古', value: Math.round(Math.random() * 100) },
    { name: '陕西', value: Math.round(Math.random() * 100) },
    { name: '吉林', value: Math.round(Math.random() * 100) },
    { name: '福建', value: Math.round(Math.random() * 100) },
    { name: '贵州', value: Math.round(Math.random() * 100) },
    { name: '广东', value: Math.round(Math.random() * 100) },
    { name: '青海', value: Math.round(Math.random() * 100) },
    { name: '西藏', value: Math.round(Math.random() * 100) },
    { name: '四川', value: Math.round(Math.random() * 100) },
    { name: '宁夏', value: Math.round(Math.random() * 100) },
    { name: '海南', value: Math.round(Math.random() * 100) },
    // {name: '台湾',value: Math.round(Math.random()*100)},
    { name: '香港', value: Math.round(Math.random() * 100) },
    { name: '澳门', value: Math.round(Math.random() * 100) },
]

const mapOption = {
    tooltip: {
        trigger: 'item',
        formatter: (params) => {
            let num
            let showHtml = ''
            if (isNaN(params.value)) {
                num = '0'
            } else {
                num = params.value
            }
            showHtml += `
              <span style="display: flex; font-size: 12px;">
                  ${'装机量'}：${params.name}</br>
              </span>
          `
            return showHtml
        },
    },

    legend: {
        orient: 'vertical',
        left: 'left',
        data: [],
    },
    series: [
        {
            name: '安装信息',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true,
                },
                emphasis: {
                    show: true,
                },
            },
            emphasis: {
                scale: true,
                itemStyle: {
                    areaColor: '#fff',
                },
            },
            symbolSize: function (val) {
                return val[2] / 15
            },
            showEffectOn: 'render',
            itemStyle: {
                areaColor: '#2043AA',
                borderColor: '#111',
                color: '#fff',
            },
            zlevel: 1,
            data,
        },
    ],
}

const initEcharts = () => {
    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then((res) => {
        console.log('res', res)
        const echart = echarts.init(document.getElementById('chartMap')) // 获取视图的echarts的DOM节点，并初始化对象
        echarts.registerMap('china', res.data) // 注册china.json的数据到初始化的echarts对象
        echart.setOption(mapOption) // 绑定地图的配置参数对象，参考第二步
        echart.resize()
    })
}

onMounted(() => {
    initEcharts()
})
</script>

<style lang="less" scoped>
.box-chart{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
#chartMap {
    width: 50%;
    height: 100%;
    border: 1px solid red;
    background-color: skyblue;
    display: flex;
    justify-content: center;
}
</style>